<template>
  <div>
    <div class="card model-wrap">
      <div class="d-flex align-items-center">
        <div class="model-item" v-for="m of models" :key="m.title">
          <span
            class="model-title"
            :class="{ 'text-primary': m.url === $route.path && status === 0 }"
            @click="goUrl(m)"
          >
            {{ m.title }}
          </span>
          <el-button
            v-if="m.subTitle"
            type="text"
            :class="{ 'font-weight-bold': m.url === $route.path && status === 1 }"
            @click="goModel(m)"
          >
            {{ m.subTitle }}：{{ m.subCount }}
          </el-button>
        </div>
      </div>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    models: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {
    productId() {
      return this.$route.query.id || ''
    },
    status() {
      return +(this.$route.query.status || 0)
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goUrl(model) {
      this.$router.push({
        path: model.url,
        query: {
          id: this.productId,
          status: 0,
        },
      })
    },

    goModel(model) {
      if (model && model.onclick) {
        model.onclick()
      } else {
        this.$router.push({
          path: model.url,
          query: {
            id: this.productId,
            status: 1,
          },
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.model-wrap {
  padding: 3rem 1rem;
  margin-bottom: 1rem;
}
.model-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  &:not(:last-child)::after {
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f061';
    display: inline-block;
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.model-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: $body-color;
  cursor: pointer;
  transition: color 0.3s;

  &:hover,
  &:active {
    color: $primary;
  }

  &.exact-active {
    color: $primary;
  }
}
</style>
